<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <style>
    	body{
    		background: #fff;
    	}
    	.banding{
    		padding:10px;
    		position: relative;
    		overflow: hidden;
    	}
    	.form-wrap{
    		padding:0px 10px 0px 10px;
    		position: relative;
    		overflow: hidden;
    	}
    	.safe-explain{
    		margin: 1.2rem 0.5rem 0 0.5rem;
    		padding-bottom:30px;
    		position: relative;
    		overflow: hidden;
    	}.safe-img{
			margin-bottom:0.5rem;    	
    	}
    	.safe-img,.safe-explain-text{
    		text-align: center;
    	}
    	.form-wrap .form-group {
		    height: 1.8rem;
		    line-height: 1.8rem;
		    padding: 0 0.5rem;
		    
		    background: #fff;
		    position: relative;
		    display: -webkit-box;
		}
		.phone-number {
		    width:10rem;
		}
		.input {
		    -webkit-box-flex: 1;
		    border: none;
		    font-size: 0.6rem;
		    color: #444;
		    height: 1rem;
		    line-height: 1rem;
		    border-radius: 0;
		}
		.msg-validate {
		    text-align: left;
		    width: 5rem;
		    
		}
		.msg-btn{
		    position: absolute;
		    right: 0;
		    top: 0rem;
		    height: 1.8rem;
		    text-align: center;
		    font-size: 0.6rem;
		    line-height: 1.8rem;
		    background: #fff;
		    width: 5rem;
		}
		.pwd {
		    width: 10rem;
		}
		.confirm-btn {
    margin-top: 0.6rem;
    display: block;
    width: 100%;
    background: #FF0000;
    color: #fff;
    height: 1.8rem;
    line-height: 1.8rem;
    border-radius: 3px;
    border: none;
    font-size: 0.72rem;
    text-align: center;
}
    </style>
    <script>
    	(function () {
        function o() {
            document.documentElement.style.fontSize = (document.documentElement.clientWidth > 414 ? 414 : document.documentElement.clientWidth) / 12 + "px"
        }

        var e = null;
        window.addEventListener("resize", function () {
            clearTimeout(e), e = setTimeout(o, 300)
        }, !1), o()
    })(window);
    </script>
</head>
<body>
	<div id='banding'>

		<article>
			<div class="safe-explain border-bottom-img">
				<div class="safe-img">
					<img src="../image/safe.png" width="40px" height="40px"/>
				</div>
				<div class="safe-explain-text">
				<p>为了保证账户安全，一个手机号仅限绑定一个机器猫账号，</p>
					<p>手机号绑定后无法解除绑定，可以更换绑定</p>
					
				</div>
			</div>
		</article>
		<div  class="form-wrap">
			<div  class="form-group border-bottom-img">
				<input type="tel" class="input phone-number js-phone-number" id="phone" maxlength="11" placeholder="手机号">
				
			</div>
			
				<div id='code-wrap' style='display:block'  class="form-group border-bottom-img">
					<input type="text" class="js-msg-validate input msg-validate" id="code" maxlength="6" placeholder="请输入短信验证码">
					<div class="js-msg-btn msg-btn border-left-img" id="send"  onclick="getCode()">发送验证码</div>
				</div>
			
		
			
			<div id='submit' style='display:block' onclick="submit()" class="js-regist-btn confirm-btn">确认绑定</div>
		
		</div>
	</div>
	
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
var authorize = null;
var uid = null;
var sel = false;
var sub = false;

var pin = null;
var mobile = null;
var send = null;
var times = 60; 
var timer = null;
	apiready = function(){
	
		send = $api.byId('send');
		
		if($api.getStorage('user')){
			uid = $api.getStorage('user').uid
		}
		
	};

	
	function getCode(){
	if(!uid){
		toast("未读取到需要修改的账号")
			return false;
	}
	
		mobile = $api.val($api.byId('phone'));
		if(mobile==''){
			toast("请填写要更换的手机号")
			return false;
		}
			var t = /^1[3|4|5|7|8]\d{9}$/;
			if(!t.test(mobile)){
				toast("请填写正确的手机号")
				return false;
			}
		
		$api.attr(send,'disabled','disabled')
		api.ajax({
			url:'http://wap.jqmao.cn/updatePin',
			method:'post',
			data:{
				values:{uid: uid,mobile: mobile}
			}
		},function(ret,err){
			if(ret){
				
				if(ret.code==0){
					pin = ret.p_code;
					//alert(pin)
					timer = setInterval(djs,1000);
				}else if(ret.code==-1){
					toast('该用户不存在');
					$api.removeAttr(send,'disabled');
				}else if(ret.code==1){
					toast('验证码暂时无法发送');
					$api.removeAttr(send,'disabled');
				}else if(ret.code==2){
					toast('请使用新手机号更换');
					$api.removeAttr(send,'disabled');
				}
				
			}else{
				//alert(JSON.stringify(err));
			}
		})
	}
	 var djs = function(){
 		$api.html(send,times+"秒后重试");
   
       /* send.attr('disabled','disabled');*/
       /*$api.attr(send,'disabled','disabled')*/
        
        times--;
        if(times <= 0){
        	$api.html(send,"发送验证码");
            $api.removeAttr(send,'disabled')
            /*send.removeAttr('disabled');*/
            times = 60;
            clearInterval(timer);
        }
    }
    function submit(){
    
    	var code = $api.val($api.byId('code'));
    	if(code==''){
    		toast("验证码不能为空")
			return false;
    	}
    		
    	
    	if(code==pin){
    	var data = {values: {uid:uid,mobile:mobile}}
    		api.ajax({
	            url:'http://wap.jqmao.cn/updatemobilesave',
	            method: 'post',   
				data:data
            },function(ret,err){
            	//coding...
            	if(ret.code==0){
            		api.sendEvent({
					    name: 'getnewusername',
					    extra: {
					        newmobile: mobile,   
					    }
					});
            		api.closeWin();
            	}
            	
            });
    	}else{
    		toast("验证码有误")
			return false;
    	}
    	
    	
    }
	
	
	
	
</script>
</html>